<template>
	<view class="container" style="padding-bottom: 120rpx;">
		<u--form>
		  <u-form-item label="箱码" prop="containerCode" labelWidth="120rpx">
		    <u--input
		      placeholder="请扫码箱码"
		      v-model.number="query.containerCode"
		      suffixIcon="scan"
		      suffixIconStyle="font-size: 68rpx"
		      style="flex: 1;"
					@confirm="getBoxInfo"
		    >
		    </u--input>
		  </u-form-item>
			<view style="display: flex;gap: 10rpx;font-weight: 600;">
				<view style="width: auto;">此箱原数量:</view>
				<view>{{ boxInfo.qty || null }}</view>
			</view>
			<u-form-item label="新数量" prop="quantity" labelWidth="120rpx">
			  <u--input
			    placeholder="请输入新数量"
			    v-model.number="query.quantity"
			    style="flex: 1;"
			  >
			  </u--input>
			</u-form-item>
		</u--form>
		<!-- 扫描结果展示区域 -->
		<uni-card v-if="Object.keys(boxInfo).length > 0" title="箱码信息">
		  <view class="info-grid">
		    <view class="info-item">
		      <view class="info-label">料号</view>
		      <view class="info-value">{{ boxInfo.materialCode }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">批号</view>
		      <view class="info-value">{{ boxInfo.materialBatch }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">数量</view>
					<view class="info-value">{{ boxInfo.qty || null }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">生产日期</view>
		      <view class="info-value">{{ boxInfo.productionDate }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">冻结状态</view>
		      <view class="info-value">{{ boxInfo.frozenStatus }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">物料状态</view>
		      <view class="info-value">{{ boxInfo.status }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">胶条长度</view>
		      <view class="info-value">{{ boxInfo.stripLength || null }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">刃高</view>
					<view class="info-value">{{ boxInfo.bladeHeight || null }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">入库时间</view>
		      <view class="info-value">{{ boxInfo.boxInboundTime || null }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">胶条截面</view>
					<view class="info-value">{{ boxInfo.sealCross || null }}</view>
		    </view>
		  </view>
		</uni-card>
		<u-toast ref="uToast"></u-toast>
		<view class="commonButton">
			<!-- <u-button type="warning">空箱解绑</u-button> -->
			<u-button type="primary" :disabled="Object.keys(boxInfo).length === 0 || !query.quantity" @click="confirmBack">确认回库</u-button>
		</view>
	</view>
</template>

<script>
	import { getBoxInStoreAPI } from '@/api/work/inStore.js'
	import { ncmmBindInAPI } from '@/api/work/ncmm'
	import uniDataSelect from '../../../node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue'
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniDataSelect,
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				query: {
					containerCode: ''
				},
				boxInfo: {}
			};
		},
		onLoad() {
			uni.$on('scancodedate',(data) => this.getCode(data.code))
		},  
		onUnload() {    
			uni.$off('scancodedate')
		},
		methods: {
			getCode(code) {
				const regex = /^R-\d+$/
				if (regex.test(code)) {
					this.query.containerCode = code
					this.getBoxInfo()
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描正确的箱码'
					})
				}
			},
			async confirmBack() {
				const submitForm = {
					containerCode: this.query.containerCode,
					...this.boxInfo
				}
				submitForm.qty = this.query.quantity
				const res = await ncmmBindInAPI(submitForm)
				if (res.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: res.message
					})
					// 重置表单
					this.query = {
						containerCode: '',
						quantity: ''
					}
					this.boxInfo = {}
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async getBoxInfo() {
				const res = await getBoxInStoreAPI({
					containerCode: this.query.containerCode
				})
				console.log(res)
				if (res.code === 200 && res.data) {
					this.boxInfo = { ...this.boxInfo, ...res.data }
				}
			}
		}
	}
</script>

<style lang="scss">
.uni-card {
	margin: 0 !important;
}
.info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-top: 10rpx;
}

.info-item {
  width: 100%;
  padding: 15rpx;
  background-color: #f5f7fa;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  line-height: 40rpx;
}

/* 可编辑输入框样式：与原文本样式保持一致，减少突兀感 */
.editable-input {
  font-size: 28rpx !important;
  color: #333 !important;
  font-weight: 500 !important;
  padding: 5rpx 0 !important;
  background: transparent !important;
  border: none !important;
  line-height: 40rpx !important;
  /* 聚焦时轻微边框提示，不破坏整体风格 */
  &:focus {
    border-bottom: 1px solid #2979ff !important;
    border-radius: 0 !important;
  }
}

/* 输入框后缀单位样式 */
.u-input__suffix {
  font-size: 28rpx !important;
  color: #333 !important;
  font-weight: 500 !important;
}
</style>